<template>
	<view class="">
		<view class="container">
				<view class="boxTop">
					<van-field v-model="username" 
					  label="用户名:" 
						placeholder="请输入用户名" />
					<van-field v-model="password" 
					  label="新密码:" 
						:right-icon="showPassword ? 'eye':'closed-eye'" 
						:type="showPassword ? 'text' : 'password'" 
						@click-right-icon="showPassword = !showPassword" 
						placeholder="请输入密码" />
				</view>
				<button type="primary" @click="handleLogin">登录</button>
		</view>
		<van-popup v-model:show="showPwd" style="width: 100%; height: 100%">
			<Mypwd @handPwd="handPwd" :state="2" :pwd="pwd" style="height: 100%"></Mypwd>
		</van-popup>
	</view>
</template>

<script setup>
	import {ref,reactive, nextTick} from 'vue';
	import {onLoad,onShow} from "@dcloudio/uni-app"
	import Mypwd from '../../components/GesturePWD.vue'
	import {useStore} from "vuex"
	const store = useStore();
	const state = reactive({
		username: '',
		password: ''
	});
	const showPassword = ref(false)
	const showPwd = ref(false);
	onLoad(() =>{
		 showPwd.value = localStorage.getItem("pwd") !== null;
		 pwd.value = localStorage.getItem("pwd");
		 let exitLogin = localStorage.getItem("exitLogin");
		 if (exitLogin) {
			 localStorage.removeItem("exitLogin");
			 showPwd.value = false;
		 }
	})
	onShow(() => {
		hideWaterMark()
	})

	// 手势
	const handPwd = async (val) => {
		console.log(val,'val');
		showPwd.value = false;
		if (val.result === "3") return;
		nextTick(() =>{
			let data = JSON.parse(localStorage.getItem("userObj"));
			// store.state.username = data.username;
			store.state.pwd = data.pwd;
		})
		uni.switchTab({
			url: '/pages/index/index'
		});
	};
	
	// 登录
	const handleLogin = () => {
		const reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,}$/
		if(!username.value){
			uni.showToast({
				icon:'none',
				title:'请输入用户名'
			})
			return
		}
		if(!password.value){
			uni.showToast({
				icon:'none',
				title:'请输入密码'
			})
			return
		}
		if(username.value != store.state.username){
			uni.showToast({
				icon:'none',
				title:'用户名输入错误'
			})
			return
		}
		if(password.value != store.state.pwd){
			uni.showToast({
				icon:'none',
				title:'密码输入错误'
			})
			return
		}
		if(username.value == store.state.username && password.value == store.state.pwd){
			uni.showToast({
				title: '登陆成功',
				icon: 'success',
			});
			setTimeout(() => {
				uni.switchTab({
					url: '/pages/index/index'
				});
			}, 1000)
		}
		
	}
	const hideWaterMark = () => {
		let aa = document.getElementsByClassName("mask_div");
		for (let i = 0; i < aa.length; i++) {
			aa[i].style.display = "none";
		}
	};
</script>

<style lang="scss" scoped>
	.container {
		margin:50% 45rpx 0;
		.boxTop{
			padding: 15rpx 15rpx 0;
			border-radius: 15rpx;
			background-color: #fff;
		}
		button {
			width: 60%;
			height: 90rpx;
			line-height: 90rpx;
			margin: 190rpx auto 0;
			font-size: 32rpx;
			background-color:#EE9845;
			border: none;
		}
	}
	:deep(.van-cell){
		border-bottom: 1px solid #efefef;
	}
	:deep(.van-popup--center) {
		max-width: 100vw !important;
	}
</style>
